<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 翻译整理">

<title>
  
    Utility classes &middot; Bootstrap
  
</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" tppabs="http://v4.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="../../assets/css/docs.min.css" tppabs="http://v4.bootcss.com/assets/css/docs.min.css" rel="stylesheet">

<!-- Google Web fonts -->
<link href="../../../fonts.useso.com/css-family=Roboto-300,400,400italic,500.css" tppabs="http://fonts.useso.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
<link href="../../../fonts.useso.com/css-family=Source+Sans+Pro-400,300,400italic,600.css" tppabs="http://fonts.useso.com/css?family=Source+Sans+Pro:400,300,400italic,600" rel='stylesheet' type='text/css'>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../assets/js/ie-emulation-modes-warning.js" tppabs="http://v4.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">

    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "../../../hm.baidu.com/hm.js-fc4ecdb3b7e797fdd7347e29dbec6802.js"/*tpa=http://hm.baidu.com/hm.js?fc4ecdb3b7e797fdd7347e29dbec6802*/;
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  </head>
  <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
      <div class="container">
        <span class="skiplink-text">Skip to main content</span>
      </div>
    </a>

    <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
  

  <div class="clearfix">
    <button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
      &#9776;
    </button>
    <a class="navbar-brand hidden-sm-up" href="../../index.htm" tppabs="http://v4.bootcss.com/">
      Bootstrap
    </a>
  </div>
  <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
    <nav class="nav navbar-nav">
      <a class="nav-item nav-link " href="../../index.htm" tppabs="http://v4.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
      <a class="nav-item nav-link active" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
      <a class="nav-item nav-link " href="../../examples/index.htm" tppabs="http://v4.bootcss.com/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">实例</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://themes.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://themes.getbootstrap.com/%27" tppabs="http://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">主题</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://expo.bootcss.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://expo.bootcss.com/%27" tppabs="http://expo.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">优站精选</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://blog.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blog.getbootstrap.com/%27" tppabs="http://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">博客</a>
    </nav>
  </div>
</header>


    <div class="bd-pageheader">
      <div class="container">
        
  <h1>Components</h1>
  <p class="lead">
    Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
  </p>


      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-3 col-md-push-9 bd-sidebar">
          <div class="bd-sidebar">

  <form class="bd-search hidden-sm-down">
    <input type="text" class="form-control" id="search-input" placeholder="Search...">
    <div class="dropdown-menu bd-search-results" id="search-results"></div>
  </form>

  <nav class="bd-links" id="docsNavbarContent">
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
        
          Getting started
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
                Introduction
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/download/index.htm" tppabs="http://v4.bootcss.com/getting-started/download">
                Download
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/browsers-devices/index.htm" tppabs="http://v4.bootcss.com/getting-started/browsers-devices">
                Browsers & devices
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/options/index.htm" tppabs="http://v4.bootcss.com/getting-started/options">
                Options
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/flexbox/index.htm" tppabs="http://v4.bootcss.com/getting-started/flexbox">
                Flexbox
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/build-tools/index.htm" tppabs="http://v4.bootcss.com/getting-started/build-tools">
                Build tools
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/best-practices/index.htm" tppabs="http://v4.bootcss.com/getting-started/best-practices">
                Best practices
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
        
          Layout
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
                Overview
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/grid/index.htm" tppabs="http://v4.bootcss.com/layout/grid">
                Grid
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/media-object/index.htm" tppabs="http://v4.bootcss.com/layout/media-object">
                Media object
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/responsive-utilities/index.htm" tppabs="http://v4.bootcss.com/layout/responsive-utilities">
                Responsive utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../content/reboot/index.htm" tppabs="http://v4.bootcss.com/content/reboot">
        
          Content
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../content/reboot/index.htm" tppabs="http://v4.bootcss.com/content/reboot">
                Reboot
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../content/typography/index.htm" tppabs="http://v4.bootcss.com/content/typography">
                Typography
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../content/code/index.htm" tppabs="http://v4.bootcss.com/content/code">
                Code
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../content/images/index.htm" tppabs="http://v4.bootcss.com/content/images">
                Images
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../content/tables/index.htm" tppabs="http://v4.bootcss.com/content/tables">
                Tables
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../content/figures/index.htm" tppabs="http://v4.bootcss.com/content/figures">
                Figures
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      
        
      

      <div class="bd-toc-item active">
        
          <a class="bd-toc-link" href="../buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
        
          Components
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
                Buttons
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../button-group/index.htm" tppabs="http://v4.bootcss.com/components/button-group">
                Button group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../button-dropdown/index.htm" tppabs="http://v4.bootcss.com/components/button-dropdown">
                Button dropdown
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../forms/index.htm" tppabs="http://v4.bootcss.com/components/forms">
                Forms
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../input-group/index.htm" tppabs="http://v4.bootcss.com/components/input-group">
                Input group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../dropdowns/index.htm" tppabs="http://v4.bootcss.com/components/dropdowns">
                Dropdowns
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../jumbotron/index.htm" tppabs="http://v4.bootcss.com/components/jumbotron">
                Jumbotron
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../label/index.htm" tppabs="http://v4.bootcss.com/components/label">
                Label
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../alerts/index.htm" tppabs="http://v4.bootcss.com/components/alerts">
                Alerts
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../card/index.htm" tppabs="http://v4.bootcss.com/components/card">
                Card
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../navs/index.htm" tppabs="http://v4.bootcss.com/components/navs">
                Navs
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../navbar/index.htm" tppabs="http://v4.bootcss.com/components/navbar">
                Navbar
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../breadcrumb/index.htm" tppabs="http://v4.bootcss.com/components/breadcrumb">
                Breadcrumb
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../pagination/index.htm" tppabs="http://v4.bootcss.com/components/pagination">
                Pagination
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../progress/index.htm" tppabs="http://v4.bootcss.com/components/progress">
                Progress
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../list-group/index.htm" tppabs="http://v4.bootcss.com/components/list-group">
                List group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../modal/index.htm" tppabs="http://v4.bootcss.com/components/modal">
                Modal
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../scrollspy/index.htm" tppabs="http://v4.bootcss.com/components/scrollspy">
                Scrollspy
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../tooltips/index.htm" tppabs="http://v4.bootcss.com/components/tooltips">
                Tooltips
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../popovers/index.htm" tppabs="http://v4.bootcss.com/components/popovers">
                Popovers
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../collapse/index.htm" tppabs="http://v4.bootcss.com/components/collapse">
                Collapse
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../carousel/index.htm" tppabs="http://v4.bootcss.com/components/carousel">
                Carousel
              </a>

              
            </li>
          
            
            

            
              
            

            <li class="active bd-sidenav-active">
              <a href="index.htm" tppabs="http://v4.bootcss.com/components/utilities">
                Utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history">
        
          About
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history">
                History
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/team/index.htm" tppabs="http://v4.bootcss.com/about/team">
                Team
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/brand/index.htm" tppabs="http://v4.bootcss.com/about/brand">
                Brand
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/license/index.htm" tppabs="http://v4.bootcss.com/about/license">
                License
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/translations/index.htm" tppabs="http://v4.bootcss.com/about/translations">
                Translations
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../migration/index.htm" tppabs="http://v4.bootcss.com/migration/">
        
          Migration
        </a>

        <ul class="nav bd-sidenav">
          
        </ul>
      </div>
    
  </nav>
</div>

        </div>
        <div class="col-md-9 col-md-pull-3 bd-content">
          <h1 class="bd-title">Utility classes</h1>
          <p>Bootstrap includes dozens of utilities—classes with a single purpose. They’re designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development.</p>

<h2 id="contents">Contents</h2>

<ul id="markdown-toc">
  <li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
  <li><a href="#spacing" id="markdown-toc-spacing">Spacing</a>    <ul>
      <li><a href="#margin" id="markdown-toc-margin">Margin</a></li>
      <li><a href="#padding" id="markdown-toc-padding">Padding</a></li>
    </ul>
  </li>
  <li><a href="#text-alignment" id="markdown-toc-text-alignment">Text alignment</a></li>
  <li><a href="#text-transform" id="markdown-toc-text-transform">Text transform</a></li>
  <li><a href="#contextual-colors-and-backgrounds" id="markdown-toc-contextual-colors-and-backgrounds">Contextual colors and backgrounds</a></li>
  <li><a href="#close-icon" id="markdown-toc-close-icon">Close icon</a></li>
  <li><a href="#floats" id="markdown-toc-floats">Floats</a></li>
  <li><a href="#center-content" id="markdown-toc-center-content">Center content</a></li>
  <li><a href="#hidden-content" id="markdown-toc-hidden-content">Hidden content</a></li>
  <li><a href="#invisible-content" id="markdown-toc-invisible-content">Invisible content</a></li>
  <li><a href="#screen-readers" id="markdown-toc-screen-readers">Screen readers</a></li>
  <li><a href="#image-replacement" id="markdown-toc-image-replacement">Image replacement</a></li>
  <li><a href="#responsive-embeds" id="markdown-toc-responsive-embeds">Responsive embeds</a></li>
</ul>

<h2 id="spacing">Spacing</h2>

<p>Assign <code>margin</code> or <code>padding</code> to an element or a subset of it’s sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, <code>1rem</code>.</p>

<h3 id="margin">Margin</h3>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.m-a-0</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span>        <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-t-0</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-r-0</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-b-0</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-l-0</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-x-0</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-y-0</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.m-a</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span>        <span class="nv">$spacer</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-t</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-r</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-b</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-l</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-x</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-y</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-x-auto</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.m-a-md</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span>        <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-t-md</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-r-md</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-b-md</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-l-md</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-x-md</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-y-md</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.m-a-lg</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span>        <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-t-lg</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-r-lg</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-b-lg</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-l-lg</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-x-lg</span> <span class="p">{</span> <span class="nl">margin-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.m-y-lg</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span></code></pre></div>

<h3 id="padding">Padding</h3>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.p-a-0</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span>        <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-t-0</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-r-0</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-b-0</span> <span class="p">{</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-l-0</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-x-0</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-right</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-y-0</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.p-a</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span>        <span class="nv">$spacer</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-t</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-r</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-b</span> <span class="p">{</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-l</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-x</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="nv">$spacer-x</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-y</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="nv">$spacer-y</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.p-a-md</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span>        <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-t-md</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-r-md</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-b-md</span> <span class="p">{</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-l-md</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-x-md</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-y-md</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">1</span><span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.p-a-lg</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span>        <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-t-lg</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-r-lg</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-b-lg</span> <span class="p">{</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-l-lg</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-x-lg</span> <span class="p">{</span> <span class="nl">padding-right</span><span class="p">:</span>  <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span>   <span class="p">(</span><span class="nv">$spacer-x</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.p-y-lg</span> <span class="p">{</span> <span class="nl">padding-top</span><span class="p">:</span>    <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer-y</span> <span class="o">*</span> <span class="m">3</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span></code></pre></div>

<h2 id="text-alignment">Text alignment</h2>

<p>Easily realign text to components with text alignment classes.</p>

<div class="bd-example" data-example-id="">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-left"</span><span class="nt">&gt;</span>Left aligned text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>Center aligned text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>Right aligned text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">&gt;</span>Justified text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-nowrap"</span><span class="nt">&gt;</span>No wrap text.<span class="nt">&lt;/p&gt;</span></code></pre></div>

<h2 id="text-transform">Text transform</h2>

<p>Transform text in components with text capitalization classes.</p>

<div class="bd-example" data-example-id="">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-lowercase"</span><span class="nt">&gt;</span>Lowercased text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-uppercase"</span><span class="nt">&gt;</span>Uppercased text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-capitalize"</span><span class="nt">&gt;</span>Capitalized text.<span class="nt">&lt;/p&gt;</span></code></pre></div>

<h2 id="contextual-colors-and-backgrounds">Contextual colors and backgrounds</h2>

<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>

<div class="bd-example" data-example-id="">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">&gt;</span>Nullam id dolor id nibh ultricies vehicula ut id elit.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">&gt;</span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">&gt;</span>Maecenas sed diam eget risus varius blandit sit amet non magna.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">&gt;</span>Donec ullamcorper nulla non metus auctor fringilla.<span class="nt">&lt;/p&gt;</span></code></pre></div>

<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>

<div class="bd-example" data-example-id="">
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-primary"</span><span class="nt">&gt;</span>Nullam id dolor id nibh ultricies vehicula ut id elit.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-success"</span><span class="nt">&gt;</span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-info"</span><span class="nt">&gt;</span>Maecenas sed diam eget risus varius blandit sit amet non magna.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-warning"</span><span class="nt">&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-danger"</span><span class="nt">&gt;</span>Donec ullamcorper nulla non metus auctor fringilla.<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="bd-callout bd-callout-info">
<h4 id="dealing-with-specificity">Dealing with specificity</h4>

<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code>&lt;div&gt;</code> with the class.</p>
</div>

<div class="bd-callout bd-callout-warning">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4>

<p>Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
</div>

<h2 id="close-icon">Close icon</h2>

<p>Use a generic close icon for dismissing content like modals and alerts. <strong>Be sure to include screen reader text when you can</strong> as we’ve done with <code>.sr-only</code>.</p>

<div class="bd-example" data-example-id="">
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
  <span class="sr-only">Close</span>
</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></div>

<h2 id="floats">Floats</h2>

<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>

<div class="bd-example" data-example-id="">
<div class="pull-left">Float left</div>
<div class="pull-right">Float right</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pull-left"</span><span class="nt">&gt;</span>Float left<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pull-right"</span><span class="nt">&gt;</span>Float right<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Classes
</span><span class="nc">.pull-left</span> <span class="p">{</span>
  <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.pull-right</span> <span class="p">{</span>
  <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// Usage as mixins
</span><span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">pull-left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.another-element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">pull-right</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<h2 id="center-content">Center content</h2>

<p>Set an element to <code>display: block;</code> and center via <code>margin</code>. Available as a mixin and class.</p>

<div class="bd-example" data-example-id="">
<div class="center-block">Centered block</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">&gt;</span>Centered block<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Class
</span><span class="nc">.center-block</span> <span class="p">{</span>
  <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
  <span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// Usage as a mixin
</span><span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">center-block</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Utilizes <a href="javascript:if(confirm(%27http://nicolasgallagher.com/micro-clearfix-hack/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://nicolasgallagher.com/micro-clearfix-hack/%27" tppabs="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Mixin itself
</span><span class="nc">.clearfix</span><span class="o">()</span> <span class="p">{</span>
  <span class="k">&amp;</span><span class="nd">:before</span><span class="o">,</span>
  <span class="k">&amp;</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="nl">content</span><span class="p">:</span> <span class="s2">" "</span><span class="p">;</span>
    <span class="nl">display</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">&amp;</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Usage as a mixin
</span><span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">clearfix</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<h2 id="hidden-content">Hidden content</h2>

<p>Hide any HTML element with the <code>[hidden]</code> attribute. Previously, v3.x included a <code>.hidden</code> class that forced toggled content. However, we removed it due to conflicts with jQuery’s <code>hide()</code> function. It’s taken from <a href="javascript:if(confirm(%27http://purecss.io/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://purecss.io/%27" tppabs="http://purecss.io/">PureCSS</a>. While <code>[hidden]</code> isn’t natively supported by IE9-10, declaring it <code>display: none</code> in our CSS gets around that problem.</p>

<p>Furthermore, <code>.invisible</code> can be used to toggle the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">&gt;</span></code></pre></div>

<h2 id="invisible-content">Invisible content</h2>

<p>The <code>.invisible</code> class can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"invisible"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Class
</span><span class="nc">.invisible</span> <span class="p">{</span>
  <span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// Usage as a mixin
</span><span class="nc">.element</span> <span class="p">{</span>
  <span class="nc">.invisible</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<h2 id="screen-readers">Screen readers</h2>

<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin
</span><span class="nc">.skip-navigation</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">sr-only</span><span class="p">;</span>
  <span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<h2 id="image-replacement">Image replacement</h2>

<p>Utilize the <code>.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"text-hide"</span><span class="nt">&gt;</span>Custom heading<span class="nt">&lt;/h1&gt;</span></code></pre></div>

<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin
</span><span class="nc">.heading</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">text-hide</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>

<h2 id="responsive-embeds">Responsive embeds</h2>

<p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>

<p>Rules are directly applied to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, and <code>&lt;object&gt;</code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>

<p><strong>Pro-Tip!</strong> You don’t need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>

<div class="bd-example" data-example-id="">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="../../../www.youtube.com/embed/zpOULjyy-n8-rel=0" tppabs="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"//www.youtube.com/embed/zpOULjyy-n8?rel=0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<p>Aspect ratios can be customized with modifier classes.</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- 21:9 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-21by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- 16:9 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- 4:3 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-4by3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>


        </div>
      </div>
    </div>

    <footer class="bd-footer text-muted" role="contentinfo">
  <div class="container">
    <ul class="bd-footer-links">
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap%27" tppabs="https://github.com/twbs/bootstrap">GitHub</a></li>
      <li><a href="javascript:if(confirm(%27https://twitter.com/getbootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/getbootstrap%27" tppabs="https://twitter.com/getbootstrap">Twitter</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/components/getting-started/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/components/getting-started/#examples%27" tppabs="http://v4.bootcss.com/components/getting-started/#examples">Examples</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/components/about/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/components/about/%27" tppabs="http://v4.bootcss.com/components/about/">About</a></li>
    </ul>
    <p>Designed and built with all the love in the world by <a href="javascript:if(confirm(%27https://twitter.com/mdo  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/mdo%27" tppabs="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="javascript:if(confirm(%27https://twitter.com/fat  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/fat%27" tppabs="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="javascript:if(confirm(%27https://github.com/orgs/twbs/people  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/orgs/twbs/people%27" tppabs="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/graphs/contributors  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/graphs/contributors%27" tppabs="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
    <p>Currently v4.0.0-alpha. Code licensed <a rel="license" href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/LICENSE  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/LICENSE%27" tppabs="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="javascript:if(confirm(%27https://creativecommons.org/licenses/by/3.0/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://creativecommons.org/licenses/by/3.0/%27" tppabs="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
  </div>
</footer>

<script src="../../../cdn.bootcss.com/jquery/1.11.3/jquery.min.js" tppabs="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script>


  <script src="../../dist/js/bootstrap.js" tppabs="http://v4.bootcss.com/dist/js/bootstrap.js"></script>



  
    <script src="../../assets/js/vendor/holder.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/holder.min.js"></script>
  
    <script src="../../assets/js/vendor/jekyll-search.js" tppabs="http://v4.bootcss.com/assets/js/vendor/jekyll-search.js"></script>
  
    <script src="../../assets/js/vendor/ZeroClipboard.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/ZeroClipboard.min.js"></script>
  
    <script src="../../assets/js/vendor/anchor.js" tppabs="http://v4.bootcss.com/assets/js/vendor/anchor.js"></script>
  
    <script src="../../assets/js/vendor/tether.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/tether.min.js"></script>
  
    <script src="../../assets/js/src/application.js" tppabs="http://v4.bootcss.com/assets/js/src/application.js"></script>
  


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>

<script>
SimpleJekyllSearch.init({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('search-results'),
  searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
  noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
  dataSource: '../../search.json.js'/*tpa=http://v4.bootcss.com/search.json*/
})

Holder.addTheme('gray', {
  background: '#777',
  foreground: 'rgba(255,255,255,.75)',
  font: 'Helvetica',
  fontweight: 'normal'
})
</script>

  </body>
</html>
